<template>
  <li class="nav-cart">
    <a href="javascript:;">购物车</a>
    <!--根据class改变颜色-->
    <span class="cart-empty-num" :class="{'cart-num':count>0}">
      <i>{{count}}</i>
    </span>
    <div class="nav-cart-wrapper">
      <div class="nav-cart-list">
        <div class="empty" v-if="count<=0">
          <h3>购物车为空</h3>
          <p>您还没有选购任何商品，现在前往商城选购吧!</p>
        </div>
        <div class="full" v-else>
          <div class="nav-cart-items">
            <ul>
              <li class="clear" v-for="(item,index) in carPanelData" :key="index">
                <div class="cart-item js-cart-item cart-item-sell">
                  <div class="cart-item-inner">
                    <div class="item-thumb">
                      <img :src="item.ali_image+'?x-oss-process=image/resize,w_206/quality,Q_80/format,webp'">
                    </div>
                    <div class="item-desc">
                      <div class="cart-cell">
                        <h4>
                          <a href="#/item/100027401">{{item.title}}</a>
                        </h4>
                        <p class="attrs">
                          <span>{{item.spec_json.show_name}}</span>
                        </p>
                        <h6>
                          <span class="price-icon">¥</span>
                          <span class="price-num">{{item.price}}</span>
                          <span class="item-num">x {{item.count}}</span>
                        </h6>
                      </div>
                    </div>
                    <div class="del-btn">删除</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="nav-cart-total">
            <p>共
              <strong class="ng-binding">{{count}}</strong> 件商品
            </p>
            <h5>合计：
              <span class="price-icon">¥</span>
              <span class="price-num ng-binding" ng-bind="cartMenu.totalPrice">{{total}}</span>
            </h5>
            <h6>
              <a
                ng-href="http://www.smartisan.com/shop/#/cart"
                class="nav-cart-btn"
                href="http://www.smartisan.com/shop/#/cart"
              >去购物车</a>
            </h6>
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  /* 
    1.计算属性将被混入到Vue实例中,所有的getter 和 setter 的 this 上下文自动地绑定为Vue 实例
    2.如果你为计算属性使用了 箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将*其实例*作为函数的第一个参数来访问
    3.计算属性的结果会被缓存,除非依赖的*响应式属性*变化才会重新计算.注意,如果某个依赖(比如非响应式属性)在该实例范畴之外,则计算属性是不会被更新的
    4. { [key: string]: Function | { get: Function, set: Function } }
  */
  computed: {
    carPanelData: function () {
      return this.$store.state.carPanelData
    },
    count: function () {
      return this.$store.getters.totalCount
    },
    total: function () {
      return this.$store.getters.totalPrice
    },
  }
};
</script>

<style>
</style>
